<template>
  <div class="schedule-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Calendar /></el-icon>
          <div class="header-text">
            <h2>日程管理</h2>
            <p>个人日程和团队日历</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button-group>
            <el-button :type="viewMode === 'month' ? 'primary' : ''" @click="viewMode = 'month'">月视图</el-button>
            <el-button :type="viewMode === 'week' ? 'primary' : ''" @click="viewMode = 'week'">周视图</el-button>
            <el-button :type="viewMode === 'day' ? 'primary' : ''" @click="viewMode = 'day'">日视图</el-button>
          </el-button-group>
          <el-button type="primary" @click="showDialog = true">
            <el-icon><Plus /></el-icon>
            新建日程
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 日历控制 -->
    <el-card shadow="never" class="calendar-control">
      <div class="control-bar">
        <div class="date-control">
          <el-button-group>
            <el-button @click="prevPeriod">
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
            <el-button @click="today">今天</el-button>
            <el-button @click="nextPeriod">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </el-button-group>
          <span class="current-date">{{ currentDateTitle }}</span>
        </div>
        <el-radio-group v-model="scheduleType">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="personal">个人</el-radio-button>
          <el-radio-button label="team">团队</el-radio-button>
          <el-radio-button label="meeting">会议</el-radio-button>
        </el-radio-group>
      </div>
    </el-card>

    <!-- 日历视图 -->
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card shadow="never" class="calendar-card">
          <el-calendar v-model="currentDate">
            <template #date-cell="{ data }">
              <div class="calendar-day">
                <div class="day-number" :class="{ 'today': isToday(data.day) }">
                  {{ data.day.split('-').slice(2).join('-') }}
                </div>
                <div class="day-schedules">
                  <div
                    v-for="schedule in getDateSchedules(data.day)"
                    :key="schedule.id"
                    class="schedule-item"
                    :class="'schedule-' + schedule.type"
                    @click="handleViewSchedule(schedule)"
                  >
                    <span class="schedule-time">{{ schedule.startTime }}</span>
                    <span class="schedule-title">{{ schedule.title }}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" class="side-panel">
          <div class="panel-title">
            <el-icon><Clock /></el-icon>
            <span>今日日程</span>
          </div>
          <el-divider />
          <div class="today-schedules">
            <div
              v-for="schedule in todaySchedules"
              :key="schedule.id"
              class="schedule-card"
              :class="'schedule-' + schedule.type"
              @click="handleViewSchedule(schedule)"
            >
              <div class="schedule-header">
                <span class="schedule-time">{{ schedule.startTime }} - {{ schedule.endTime }}</span>
                <el-tag :type="getScheduleTagType(schedule.type)" size="small">
                  {{ getScheduleTypeName(schedule.type) }}
                </el-tag>
              </div>
              <div class="schedule-content">
                <div class="schedule-title">{{ schedule.title }}</div>
                <div class="schedule-location" v-if="schedule.location">
                  <el-icon><LocationFilled /></el-icon>
                  {{ schedule.location }}
                </div>
              </div>
            </div>
            <el-empty v-if="todaySchedules.length === 0" description="今天暂无日程" :image-size="80" />
          </div>
        </el-card>

        <el-card shadow="never" class="side-panel" style="margin-top: 20px;">
          <div class="panel-title">
            <el-icon><TrendCharts /></el-icon>
            <span>日程统计</span>
          </div>
          <el-divider />
          <div class="schedule-stats">
            <div class="stat-item">
              <span class="stat-label">本周日程</span>
              <span class="stat-value">{{ stats.week }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">本月日程</span>
              <span class="stat-value">{{ stats.month }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">待办事项</span>
              <span class="stat-value">{{ stats.pending }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新建/编辑日程对话框 -->
    <el-dialog
      v-model="showDialog"
      :title="dialogTitle"
      width="600px"
      destroy-on-close
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="日程标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入日程标题" />
        </el-form-item>
        <el-form-item label="日程类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择日程类型" style="width: 100%">
            <el-option label="个人日程" value="personal" />
            <el-option label="团队日程" value="team" />
            <el-option label="会议安排" value="meeting" />
            <el-option label="出差行程" value="travel" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择开始时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择结束时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="地点" prop="location">
          <el-input v-model="form.location" placeholder="请输入地点" />
        </el-form-item>
        <el-form-item label="参与人员" prop="participants">
          <el-select v-model="form.participants" multiple placeholder="请选择参与人员" style="width: 100%">
            <el-option label="张三" value="1" />
            <el-option label="李四" value="2" />
            <el-option label="王五" value="3" />
            <el-option label="赵六" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="提醒设置" prop="reminder">
          <el-select v-model="form.reminder" placeholder="请选择提醒时间" style="width: 100%">
            <el-option label="不提醒" value="none" />
            <el-option label="开始时" value="0" />
            <el-option label="提前15分钟" value="15" />
            <el-option label="提前30分钟" value="30" />
            <el-option label="提前1小时" value="60" />
            <el-option label="提前1天" value="1440" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Calendar, Plus, ArrowLeft, ArrowRight, Clock, LocationFilled, TrendCharts
} from '@element-plus/icons-vue'

// 当前日期
const currentDate = ref(new Date())
const viewMode = ref('month')
const scheduleType = ref('all')

// 统计数据
const stats = reactive({
  week: 12,
  month: 45,
  pending: 8
})

// 日程数据
const schedules = ref([
  {
    id: 1,
    title: '项目进度会议',
    type: 'meeting',
    date: new Date().toISOString().split('T')[0],
    startTime: '09:00',
    endTime: '10:30',
    location: '会议室A',
    participants: ['张三', '李四', '王五']
  },
  {
    id: 2,
    title: '客户拜访',
    type: 'personal',
    date: new Date().toISOString().split('T')[0],
    startTime: '14:00',
    endTime: '16:00',
    location: '客户公司',
    participants: ['张三']
  },
  {
    id: 3,
    title: '团队建设活动',
    type: 'team',
    date: new Date(Date.now() + 86400000).toISOString().split('T')[0],
    startTime: '15:00',
    endTime: '18:00',
    location: '户外拓展基地',
    participants: ['张三', '李四', '王五', '赵六']
  }
])

// 对话框
const showDialog = ref(false)
const formRef = ref(null)
const currentSchedule = ref(null)
const dialogTitle = computed(() => currentSchedule.value ? '编辑日程' : '新建日程')

// 表单
const form = reactive({
  title: '',
  type: '',
  startTime: null,
  endTime: null,
  location: '',
  participants: [],
  reminder: 'none',
  remark: ''
})

// 表单验证规则
const rules = {
  title: [{ required: true, message: '请输入日程标题', trigger: 'blur' }],
  type: [{ required: true, message: '请选择日程类型', trigger: 'change' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
}

// 计算属性
const currentDateTitle = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth() + 1
  return `${year}年${month}月`
})

const todaySchedules = computed(() => {
  const today = new Date().toISOString().split('T')[0]
  return schedules.value.filter(s => s.date === today)
})

// 方法
const prevPeriod = () => {
  const date = new Date(currentDate.value)
  date.setMonth(date.getMonth() - 1)
  currentDate.value = date
}

const nextPeriod = () => {
  const date = new Date(currentDate.value)
  date.setMonth(date.getMonth() + 1)
  currentDate.value = date
}

const today = () => {
  currentDate.value = new Date()
}

const isToday = (date) => {
  return date === new Date().toISOString().split('T')[0]
}

const getDateSchedules = (date) => {
  return schedules.value.filter(s => s.date === date).slice(0, 3)
}

const handleViewSchedule = (schedule) => {
  ElMessageBox.alert(
    `时间：${schedule.startTime} - ${schedule.endTime}\n地点：${schedule.location || '无'}\n参与人：${schedule.participants.join('、')}`,
    schedule.title,
    {
      confirmButtonText: '确定',
      type: 'info'
    }
  )
}

const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('保存成功')
      showDialog.value = false
    }
  })
}

const getScheduleTypeName = (type) => {
  const map = {
    personal: '个人',
    team: '团队',
    meeting: '会议',
    travel: '出差'
  }
  return map[type] || type
}

const getScheduleTagType = (type) => {
  const map = {
    personal: '',
    team: 'success',
    meeting: 'warning',
    travel: 'danger'
  }
  return map[type] || ''
}
</script>

<style scoped>
.schedule-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.calendar-control {
  margin-bottom: 20px;
}

.control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-control {
  display: flex;
  align-items: center;
  gap: 20px;
}

.current-date {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.calendar-day {
  min-height: 80px;
  padding: 4px;
}

.day-number {
  text-align: center;
  padding: 4px;
  font-size: 14px;
}

.day-number.today {
  background-color: #409EFF;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: 0 auto;
}

.day-schedules {
  margin-top: 4px;
}

.schedule-item {
  font-size: 12px;
  padding: 2px 4px;
  margin-bottom: 2px;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-item:hover {
  opacity: 0.8;
}

.schedule-personal {
  background-color: #e3f2fd;
  color: #1976d2;
}

.schedule-team {
  background-color: #e8f5e9;
  color: #388e3c;
}

.schedule-meeting {
  background-color: #fff3e0;
  color: #f57c00;
}

.schedule-travel {
  background-color: #fce4ec;
  color: #c2185b;
}

.side-panel {
  height: fit-content;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.today-schedules {
  max-height: 400px;
  overflow-y: auto;
}

.schedule-card {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.schedule-card:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.schedule-time {
  font-size: 13px;
  color: #909399;
}

.schedule-content .schedule-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.schedule-location {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 4px;
}

.schedule-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}
</style>

